<template>
	<view class="fontbox">
		<view class="font">
			<view :class="['todo',fontsizedetail==1?'active':'']" @click="changesize(1)">较小</view>
			<view :class="['todo',fontsizedetail==2?'active':'']" @click="changesize(2)">小</view>
			<view :class="['todo',fontsizedetail==3?'active':'']" @click="changesize(3)">默认</view>
			<view :class="['todo',fontsizedetail==4?'active':'']" @click="changesize(4)">大</view>
			<view :class="['todo',fontsizedetail==5?'active':'']" @click="changesize(5)">较大</view>
		</view>
		<view class="close" @click="closefont">关闭</view>
	</view>
	
</template>

<script>
	import {common} from '@/common/publish.js';
	import {mapState,mapMutations} from 'vuex';
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			changesize(val){
				var that =this;
				that.fontsizedetail = val;
				uni.setStorage({
					key: 'fontsizedetail',data: val,
					success: function () {
						that.$store.commit('changedetail',val);
					}
				});
			},
			closefont(){
				this.$emit("closefont")
			}
		},
		computed:{
			...mapState(['fontsizedetail'])
		}
	}
</script>

<style lang="scss">
	@import '@/common/publish.scss';
	.fontbox{
		position:fixed;
		left:0;
		bottom:0;
		height:260upx;
		width:750upx;
		background-color:#fff;
		border-top:1px solid #fbfbfb;
		z-index:11;
	}
	.font{
		display: flex;
		flex-direction:row;
		flex-wrap:nowrap ;
		justify-content:space-between;
		align-items:flex-start;
		width:700upx;
		padding:0 25upx;
	}
	.todo{
		width:20%;
		text-align:center;
		font-size:32upx;
		line-height:160upx;
		color:$fontblue;
	}
	.close{
		text-align: center;
		color:$fontblue;
		position: absolute;
		bottom:0;
		left:0;
		width:750upx;
		height:100upx;
		font-size:32upx;
		line-height:100upx;
		background-color:$bgcolor;
	}
	.active{
		text-decoration:underline;
		font-size:34upx;
	}
</style>
